<template>
  <div v-loading="loading">
    <el-container>
      <el-header>
        <PageHeader :router_list="router_list" :show-logo="true"></PageHeader>
      </el-header>
      <el-main>
        <div v-if="userInfo.type === 0 && !course.some(item => item.topped.toString() === '1')" style="display: flex; justify-content: end" >
          <el-button type="primary" @click="() => {addCourseVisible = true;}">
            <img :src="image.add" alt="" style="width: 14px; height: 14px; color: white">
            <span style="margin-left: 5px;">加入课程</span>
          </el-button>
        </div>

        <div style="display: flex; justify-content: end" v-if="!course.some(item => item.topped.toString() === '1')">
          <el-dropdown placement="top" trigger="click" @click.stop="() => {}">
            <el-button type="primary" v-if="userInfo.type === 1">
              <img :src="image.add" alt="" style="width: 14px; height: 14px; color: white">
              <span style="margin-left: 5px;">创建/加入课程</span>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="() => {buildCourseVisible = true}">创建课程</el-dropdown-item>
                <el-dropdown-item @click.stop="() => {addCourseVisible = true}">加入课程</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <div class="topped-course item" v-if="course.some(item => item.topped.toString() === '1')">
          <div class="item-header">
            <div><h2>置顶课程</h2></div>
            <div v-if="userInfo.type === 0">
              <el-button type="primary" @click="() => {addCourseVisible = true;}">
                <img :src="image.add" alt="" style="width: 14px; height: 14px; color: white">
                <span style="margin-left: 5px;">加入课程</span>
              </el-button>
            </div>

            <div style="display: flex; justify-content: end" v-if="userInfo.type === 1">
              <el-dropdown placement="top" trigger="click" @click.stop="() => {}">
                <el-button type="primary" v-if="userInfo.type === 1">
                  <img :src="image.add" alt="" style="width: 14px; height: 14px; color: white">
                  <span style="margin-left: 5px;">创建/加入课程</span>
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="() => {buildCourseVisible = true}">创建课程</el-dropdown-item>
                    <el-dropdown-item @click.stop="() => {addCourseVisible = true}">加入课程</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>
          <div class="item-classes">
            <StudentCard :course="course.filter(item => item.topped === 1)" v-if="userInfo.type === 0"
                         @initData="upUpState"></StudentCard>
            <TeacherCard :course="course.filter(item => item.topped === '1')" v-if="userInfo.type === 1"
                         @initData="upUpState"></TeacherCard>
          </div>
        </div>

        <div class="action">
          <div>
            <el-tabs v-model="activeIndex" :default-active="activeIndex"
                     @tab-change="() => {isEmpty = true; changeCoursesList()}">
              <el-tab-pane v-if="userInfo.type === 1" label="我教的" name="0"></el-tab-pane>
              <el-tab-pane v-if="userInfo.type === 1" label="我协助的" name="1"></el-tab-pane>
              <el-tab-pane v-if="userInfo.type === 1" label="我学的" name="2"></el-tab-pane>

              <el-tab-pane v-if="userInfo.type === 0" label="我学的" name="0"></el-tab-pane>
              <el-tab-pane v-if="userInfo.type === 0" label="我协助的" name="1"></el-tab-pane>
            </el-tabs>
          </div>

          <div style="display: flex; justify-content: space-between;align-items: center">
            <el-button @click="() => {filedVisible = true}">归档管理</el-button>
            <el-input placeholder="搜索我的课程" :prefix-icon="Search"/>
          </div>
        </div>

        <!--    学生端    -->
        <div v-for="semester in semesterInfo" v-if="courseOfActive.length > 0 && userInfo.type === 0">
          <div class="demo-collapse item list-item"
               v-if="checkIsEmpty(semester)">
            <el-collapse v-model="activeNames">
              <el-collapse-item :title="semester.totalDate" name="1" style="font-size: 20px">
                <div class="pre-course">
                  <StudentCard :course="courseOfActive.filter(item => item.semester === semester.totalDate)"
                               @initData="upUpState" v-if="userInfo.type === 0"></StudentCard>
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </div>

        <!--    教师端    -->
        <div v-for="semester in semesterInfo"
             v-if="(courseOfMyTeach.length > 0 || courseOfMyHelp.length > 0) && userInfo.type === 1">
          <div class="demo-collapse item list-item"
               v-if="checkIsEmpty(semester)">
            <el-collapse v-model="activeNames">
              <el-collapse-item :title="semester.totalDate" name="1" style="font-size: 20px">
                <div class="pre-course">
                  <TeacherCard :course="getTeacherCourseList(semester)"
                               @initData="upUpState"></TeacherCard>
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </div>

        <div v-if="isEmpty" style="padding: 100px 0 12px 0; display: block; justify-content: center">
          <img :src="image.empty" alt="" style="height: 184px;display: block;margin: 0 auto">
          <span
              style="font-size: 16px; margin: 0 auto; display: block; width: fit-content;color: #74787c;">暂无课程</span>
        </div>
      </el-main>
    </el-container>

    <el-dialog
        class="add-course"
        v-model="addCourseVisible"
        title="Tips"
        width="527"
        draggable
    >
      <template #header>
        <h2>
          <span class="d-name">加入课程</span>
        </h2>
      </template>

      <el-form
          :rules="addCourseRules"
          label-width="auto"
          :model="addCourseForm"
          style="max-width: 600px"
      >
        <el-form-item label="加课码" prop="code">
          <el-input v-model="addCourseForm.code" clearable/>
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="addCourseVisible = false">取消</el-button>
          <el-button type="primary" @click="handelJoinCourse()">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog
        class="build-course"
        v-model="buildCourseVisible"
        title="Tips"
        width="527"
        draggable
    >
      <template #header>
        <h2>
          <span class="d-name">创建课程</span>
        </h2>
      </template>

      <el-form
          :rules="buildCourseRules"
          label-width="auto"
          :model="buildCourseForm"
          style="max-width: 700px"
      >
        <el-form-item label="课程名称" prop="name">
          <el-input show-word-limit maxlength="50" v-model="buildCourseForm.name" clearable/>
        </el-form-item>

        <el-form-item label="教学班级" prop="classInfo">
          <el-input show-word-limit maxlength="30" v-model="buildCourseForm.classInfo" clearable/>
        </el-form-item>

        <el-form-item label="选择学年-学期" style="display: flex;justify-content: space-between" required>
          <el-col :span="11">
            <el-form-item prop="year">
              <el-select style="width: 180px;" v-model="buildCourseForm.year" clearable>
                <el-option
                    v-for="item in years"
                    :key="item.label"
                    :label="item.label"
                    :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col class="text-center" :span="2">
            <span class="text-gray-500"></span>
          </el-col>
          <el-col :span="11">
            <el-form-item prop="semester">
              <el-select style="width: 180px" v-model="buildCourseForm.semester" clearable>
                <el-option
                    v-for="item in items"
                    :key="item.label"
                    :label="item.label"
                    :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="buildCourseVisible = false">取消</el-button>
          <el-button type="primary" @click="handelBuildCourse()">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog
        draggable
        class="archive"
        v-model="filedVisible"
        title="Tips"
        width="500"
    >
      <template #header>
        <h2>
          <span class="d-name">归档课程</span>
        </h2>
      </template>

      <el-header>
        <div>
          <el-tabs :default-active="activeIndexOfFiled" v-model="activeIndexOfFiled">
            <el-tab-pane index="0" :label="'我学的(' + getFiledList('0').length + ')'" name="0"
                         v-if="userInfo.type === 0"></el-tab-pane>
            <el-tab-pane index="1" :label="'我协助的(' + getFiledList('1').length + ')'" name="1"
                         v-if="userInfo.type === 0"></el-tab-pane>

            <el-tab-pane index="0" :label="'我教的(' + getFiledList('0').length + ')'" name="0"
                         v-if="userInfo.type === 1"></el-tab-pane>
            <el-tab-pane index="1" :label="'我协助的(' + getFiledList('1').length + ')'" name="1"
                         v-if="userInfo.type === 1"></el-tab-pane>
            <el-tab-pane index="0" :label="'我学的(' + getFiledList('2').length + ')'" name="2"
                         v-if="userInfo.type === 1"></el-tab-pane>
          </el-tabs>
        </div>

        <div style="display: flex; justify-content: space-between; top:10px; position: relative">
          <el-input placeholder="请输入内容" :prefix-icon="Search"/>
        </div>
      </el-header>
      <el-main>
        <div class="semester">
          <div v-for="semester in semesterInfo">
            <p class="item"
               v-if="getFiledList(activeIndexOfFiled).some(item => item.semester === semester.totalDate)">
              {{ semester.totalDate }}</p>
          </div>
        </div>
        <div class="list-box">
          <div class="item" v-for="item in getFiledList(activeIndexOfFiled)">
            <div class="left">
            </div>

            <div class="right">
              <div class="header">
                <span>{{ item.classesInfo }}</span>
                <div class="handle el-dropdown">
                  <el-dropdown placement="bottom" trigger="click">
                    <img :src="image.and_so_clo" style="width: 20px; height: 20px" alt="">
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item @click="() => {handelFiled(userInfo.type === 0 ? item.ownId : item.id, 0)}">
                          恢复
                        </el-dropdown-item>
                        <el-dropdown-item @click="() => {handelDelete(userInfo.type === 0 ? item.ownId : item.id)}">
                          删除
                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </div>
              </div>
              <div class="name">{{ item.name }}</div>
              <div class="bottom">{{ item.illustrate }}</div>
            </div>
          </div>
        </div>
      </el-main>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="filedVisible = false">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {Search} from "@element-plus/icons-vue";
import StudentCard from '../../components/StudentCard/index.vue';
import TeacherCard from '../../components/TeacherCard/index.vue';
import {onMounted, ref} from "vue";
import {useRoute} from "vue-router";
import PageHeader from '../../components/PageHeader/index.vue'
import {image} from "../../assets/index.js";
import {getCourses} from "../../api/course.js";
import userStore from "../../stores/user.js";
import {semesterList} from "../../api/source.js";
import {deleteCourse, joinCourseOfStudent, updateUpState} from "../../api/stuCourse.js";
import {
  buildCourse,
  deleteCourseOfTeacher,
  getCourseListOfTeacher,
  joinCourseOfTeacher,
  modifyCourseState
} from "../../api/teacherCourse.js";
import {ElMessage} from "element-plus";

const userInfo = userStore()

const route = useRoute()
const router_list = ref([
  {
    name: '主页',
    link: '/main/home'
  }
])

const activeIndex = ref('0')
const activeIndexOfFiled = ref('0')
const activeNames = ref('1')

const filedVisible = ref(false)
const addCourseVisible = ref(false)
const buildCourseVisible = ref(false)
const isEmpty = ref(true)

const loading = ref(true)

const addCourseForm = ref({
  code: ''
})

const addCourseRules = ref({
  code: [
    {required: true, message: '请输入加课码', trigger: 'blur'}
  ]
})

const buildCourseForm = ref({
  name: '',
  classInfo: '',
  year: '',
  semester: ''
})

const buildCourseRules = ref({
  name: [
    {required: true, message: '必填项', trigger: 'blur'}
  ],
  classInfo: [
    {required: true, message: '必填项', trigger: 'blur'}
  ],
  year: [
    {required: true, message: '必填项', trigger: 'blur'}
  ],
  semester: [
    {required: true, message: '必填项', trigger: 'blur'}
  ]
})

const course = ref([])
const courseOfFiled = ref([])
// 学生的课程集合
const courseOfActive = ref([])

// 教师的课程集合
const courseOfMyTeach = ref([])
const courseOfMyHelp = ref([])

const semesterInfo = ref([])
const years = ref([])
const items = ref([
  {
    value: '全年',
    label: '全年'
  },
  {
    value: '第一学期',
    label: '第一学期'
  },
  {
    value: '第二学期',
    label: '第二学期'
  }
])

const initData = () => {
  if (userInfo.type === 0) {
    getCourses({id: userInfo.id}).then(res => {
      if (res.code === 200) {
        course.value = res.data.filter(item => item.filed === 0)
        courseOfFiled.value = res.data.filter(item => item.filed === 1)
        courseOfActive.value = course.value.filter(item => item.archived.toString() === activeIndex.value)
        loading.value = false
      }
    }, error => {
      loading.value = false
      message('error', error.message)
    })
  } else {
    getCourseListOfTeacher({id: userInfo.id}).then(res => {
      if (res.code === 200) {
        course.value = res.data.filter(item => item.archiveStatus === '0')
        courseOfFiled.value = res.data.filter(item => item.archiveStatus === '1')
        courseOfMyTeach.value = course.value.filter(item => item.principal === userInfo.name)
        courseOfMyHelp.value = course.value.filter(item => item.principal !== userInfo.name)
        loading.value = false
      }
    }, error => {
      loading.value = false
      message('error', error.message)
    })
  }

}

const getTeacherCourseList = (semester) => {
  if (activeIndex.value === '0') {
    return courseOfMyTeach.value.filter(item => item.semester === semester.totalDate)
  } else {
    return courseOfMyHelp.value.filter(item => item.semester === semester.totalDate)
  }
}

const getSemesterList = () => {
  semesterList().then(res => {
    if (res.code === 200) {
      years.value = []
      semesterInfo.value = res.data
      for (const semester of semesterInfo.value) {
        years.value.push({
          label: semester.year,
          value: semester.year
        })
      }
    }
  }, error => {
    message('error', error.message)
  })
}

const checkIsEmpty = (semester) => {
  if (userInfo.type === 0) {
    return course.value.some(item => {
          if (item.semester === semester.totalDate && (item.archived.toString()) === activeIndex.value) {
            isEmpty.value = false
          }
          return item.semester === semester.totalDate && (item.archived.toString()) === activeIndex.value
        }
    )
  } else {
    const testArr = activeIndex.value === '0' ? [...courseOfMyTeach.value] : [...courseOfMyHelp.value]
    return testArr.some(item => {
          if (item.semester === semester.totalDate) {
            isEmpty.value = false
          }
          return item.semester === semester.totalDate
        }
    )
  }
}

const handelJoinCourse = () => {
  if (userInfo.type === 0) {
    joinCourseOfStudent({addCourseCode: addCourseForm.value.code, id: userInfo.id}).then(res => {
      if (res.code === 200) {
        message('success', '加入成功')
        addCourseVisible.value = false
        initData()
      } else {
        message('error', res.message)
      }
    })
  } else {
    joinCourseOfTeacher({addCourseCode: addCourseForm.value.code, id: userInfo.id}).then(res => {
      if (res.code === 200) {
        message('success', '加入成功')
        addCourseVisible.value = false
        initData()
      } else {
        message('error', res.message)
      }
    })
  }
}

const handelBuildCourse = () => {
  if (userInfo.type === 1) {
    for (const semester of semesterInfo.value) {
      if (semester.year === buildCourseForm.value.year && buildCourseForm.value.semester === semester.item) {
        loading.value = true
        buildCourse(
            {
              principalId: userInfo.id,
              name: buildCourseForm.value.name,
              classesInfo: buildCourseForm.value.classInfo,
              semesterId: semester.id
            }).then(res => {
          if (res.code === 200) {
            message('success', '新增成功')
            buildCourseVisible.value = false
            initData()
          }
        }, error => {
          loading.value = false
          message('error', error.message)
        })
      }
    }
  }
}

const getFiledList = (type) => {
  if (userInfo.type === 0) {
    return courseOfFiled.value.filter(item => item.archived.toString() === type)
  } else {
    if (type === '0') {
      return courseOfFiled.value.filter(item => item.principal === userInfo.name)
    } else if (type === '1') {
      return courseOfFiled.value.filter(item => item.principal !== userInfo.name)
    } else {
      return []
    }
  }
}

const getFiledListOfTeacher = (type) => {
  if (type === 0) {
    return courseOfMyTeach.value.filter(item => item.archiveStatus === '0')
  } else if (type === 1) {
    return courseOfMyHelp.value.filter(item => item.archiveStatus === '0')
  } else {
    return []
  }
}


const changeCoursesList = () => {
  if (userInfo.type === 0) {
    courseOfActive.value = course.value.filter(item => item.archived.toString() === activeIndex.value)
  }
}

const handelFiled = (id, state) => {
  const func = userInfo.type === 0 ? updateUpState : modifyCourseState
  const data = userInfo.type === 0 ? {id: id, filed: state, topped: 0} : {id: id, archiveStatus: state, topped: 0}
  loading.value = true
  func(data).then(res => {
    if (res.code === 200) {
      message('success', '操作成功')
      filedVisible.value = false
      initData()
    }
  }, error => {
    loading.value = false
    message('error', error.message)
  })
}

const handelDelete = (id) => {
  loading.value = true
  if (userInfo.type === 0) {
    deleteCourse({id: id}).then(res => {
      if (res.code === 200) {
        message('success', '删除成功')
        filedVisible.value = false
        initData()
      }
    }, error => {
      loading.value = false
      message('error', error.message)
    })
  } else {
    deleteCourseOfTeacher({id: id}).then(res => {
      if (res.code === 200) {
        message('success', '删除成功')
        filedVisible.value = false
        initData()
      }
    }, error => {
      loading.value = false
      message('error', error.message)
    })
  }

}

const message = (type, text) => {
  ElMessage({
    message: text,
    type: type,
    plain: true,
  })
}

const upUpState = () => {
  initData()
}

onMounted(() => {
  getSemesterList()
  initData()
})
</script>

<style>
.add-course {
  padding: 0;
  border-radius: 8px;

  .el-dialog__header {
    cursor: move;
    padding: 18px 24px;
    border-bottom: 1px solid #dadce0;
    height: 50px;
    line-height: 12px;

    h2 {
      display: flex;
      align-items: center;
      justify-content: space-between;

      span {
        font-size: 16px;
        color: #3c4043;
        font-weight: 700;
      }

      .d-close {
        cursor: pointer;
        width: 24px;
        height: 24px;
        font-family: font_family, sans-serif !important;
        font-size: 24px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }
    }
  }

  .el-dialog__body {
    padding: 20px 15px 15px 15px;
    color: #606266;
    font-size: 14px;
    word-break: break-all;
  }

  .el-dialog__footer {
    padding: 10px 20px 10px;
    text-align: right;
    box-sizing: border-box;
    border-top: 1px solid #dadce0;

    .el-button {
      padding: 10px 20px;
      margin-left: 12px;
    }
  }
}

.build-course {

}

.archive {
  width: 884px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 0 8px 0 #6f6f6f;
  margin-top: 5vh;
  left: 28px;
  top: -5px;
  padding: 0;


  .el-dialog__header {
    padding: 18px 24px;
    border-bottom: 1px solid #dadce0;
    height: 50px;
    line-height: 12px;

    h2 {
      display: flex;
      align-items: center;
      justify-content: space-between;

      span {
        font-size: 16px;
        color: #3c4043;
        font-weight: 700;
      }

      .d-close {
        cursor: pointer;
        width: 24px;
        height: 24px;
        font-family: font_family, sans-serif !important;
        font-size: 24px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }
    }

    .el-dialog__headerbtn {
      width: 24px;
      height: 24px;
      top: 8px;
      right: 15px;

      i {
        width: 100%;
        height: 100%;

        svg {
          width: 100%;
          height: 100%;
          color: black
        }
      }
    }
  }

  .el-dialog__body {
    height: 505px;
    display: flex;
    flex-flow: column nowrap;
    padding: 20px 15px 15px 15px;
    color: #606266;
    font-size: 14px;
    word-break: break-all;

    .el-header {
      display: flex;
      justify-content: space-between;
      margin: 0 !important;
      height: fit-content;
      border-bottom: 1px solid #dadce0;
      padding: 0 !important;

      .el-menu {
        height: 54px;
      }

      .el-menu-item {
        width: 70px;
        padding: 0;
        height: 40px;
        box-sizing: border-box;
        line-height: 40px;
        display: inline-block;
        list-style: none;
        font-size: 16px;
        font-weight: 500;
        color: #303133;
        position: relative;

        &:nth-child(1) {
          margin-right: 20px;
        }

        &:nth-child(2) {
          margin-left: 20px;
        }
      }

      .el-menu--horizontal.el-menu {
        height: 79px;
        border: none;
        padding: 0 0 24px 0;
        margin: 0 !important;
      }

      .el-input {
        height: 36px;
        line-height: 36px;
        margin-left: 24px;
      }

      .el-input__wrapper {
        flex-direction: row-reverse;
        border-radius: 51px;
      }
    }

    .el-main {
      flex: 1;
      display: flex;
      align-items: normal;
      justify-content: space-between;
      margin: 0;
      padding: 0;
      border: 0;
      outline: none;
      font-size: 100%;
      font-weight: 400;
      vertical-align: baseline;
      font-family: Roboto, Helvetica, Arial, sans-serif;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      width: 100% !important;
      max-width: 100% !important;
      height: fit-content !important;

      .semester {
        border-right: 1px solid #dadce0;
        flex: 1 1 30%;
        max-height: 400px;
        overflow-x: auto;

        .item {
          cursor: pointer;
          padding: 24px !important;
          font-size: 14px;
          text-align: left;
          color: #3c4043;
          line-height: 16px;
          border: none !important;
          border-left: 2px solid transparent !important;
          background-color: white !important;
        }

        .active {
          background: #e8f0ff !important;
          color: #4285f4;
          border-left-color: #4285f4 !important;
          border-radius: 0 !important;
        }
      }

      .list-box {
        padding-left: 24px;
        padding-top: 24px;
        flex: 1 1 70%;
        overflow: auto;
        height: 400px;
        margin: 0;
        border: 0;
        outline: none;
        font: inherit;
        font-weight: 400;
        vertical-align: baseline;
        font-family: Roboto, Helvetica, Arial, sans-serif;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        height: 100%;

        .item {
          margin-bottom: 16px;
          width: 100%;
          height: 112px;
          padding: 16px;
          border: 1px solid #dadce0;
          border-radius: 4px;
          background-color: white !important;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .left {
            background: no-repeat 50% / cover;
            margin-right: 16px;
            position: relative;
            width: 96px;
            height: 80px;
            background: #faa723;
            border-radius: 8px 8px 0 0;
            cursor: pointer;
          }

          .right {
            background-color: white;
            flex: 1;

            .header {
              font-size: 14px;
              font-family: PingFangSC, PingFangSC-Regular, sans-serif;
              font-weight: 400;
              text-align: left;
              color: #333;
              line-height: 20px;
              display: flex;
              justify-content: space-between;

              span {
                font-size: 14px;
              }

              .handle.el-dropdown {
                display: inline-block;
                position: relative;
                color: #606266;
                font-size: 14px;
              }

            }

            .name {
              margin-top: 4px;
              font-size: 18px;
              font-family: PingFangSC, PingFangSC-Medium, sans-serif;
              font-weight: 500;
              text-align: left;
              color: #333;
              line-height: 24px;
              cursor: pointer;
            }

            .bottom {
              margin-top: 6px;
              display: flex;
              align-items: center;
            }
          }
        }
      }
    }

    .el-main::-webkit-scrollbar {
      display: none;
    }
  }

  .el-dialog__footer {
    height: 84px;
    padding: 24px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1);
    text-align: right;
    box-sizing: border-box;
    border-top: 1px solid #dadce0;
  }

  .el-dialog__wrapper {
    .el-dialog {
      border-radius: 10px;
    }
  }
}
</style>

<style scoped>

:deep(.el-collapse-item__header) {
  font-size: 18px;
}

.el-header {
  padding: 0;
  margin-bottom: 12px;
}

.el-main {
  max-width: 1425px;
  margin: 0 auto;
  padding: 0;
  width: 120rem;

  .item {
    border: 1px solid #dadce0;
    padding: 18px;
    border-radius: 8px;
    background-color: #f8f9fa;

    .item-header {
      display: flex;
      justify-content: space-between;
      font-weight: 400;

      h2 {
        font-size: 20px;
        font-family: PingFangSC, PingFangSC-Medium, sans-serif;
        color: #575a5b;
        font-weight: 500;
      }
    }
  }

  .item-classes {
    flex-flow: row wrap;
    overflow-y: auto;
    max-height: 320px;
    display: grid;
    justify-content: start;
    grid-template-columns: repeat(auto-fill, 318px);
    grid-column-gap: 30px;
    grid-row-gap: 20px;
    margin-top: 12px;
  }

  .item-classes::-webkit-scrollbar {
    display: none;
  }

  .topped-course {
    :deep(.el-button) {
      padding: 10px 20px;
      margin-left: 12px;
      font-size: 14px;
      border-radius: 4px;
    }
  }

  .action {
    display: flex;
    justify-content: space-between;
    padding-top: 12px;
    padding-bottom: 12px;
    font-size: 20px;
    color: #575a5b;
    line-height: 24px;

    :deep(.el-tabs) {
      height: 54px;
    //--el-tabs-header-height: 0; display: block;
    }

    :deep(.el-tabs__header ) {
      margin: 0;
      height: 100%;
    }

    :deep(.el-tabs__nav-wrap) {
      height: 100%;
    }

    :deep(.el-tabs__nav-scroll) {
      height: 100%;
    }

    :deep(.el-tabs__nav) {
      height: 100%;
    }

    :deep(.el-tabs__item) {
      height: 100%;
    }

    :deep(.el-tabs__nav-wrap:after) {
      height: 0;
    }

    :deep(.el-button) {
      padding: 10px 20px;
      margin-left: 12px;
      height: 36px;
      line-height: 36px;
    }

    :deep(.el-input) {
      height: 36px;
      line-height: 36px;
      margin-left: 24px;
    }

    :deep(.el-input__wrapper) {
      flex-direction: row-reverse;
      border-radius: 51px;
    }

    :deep(.el-menu) {
      height: 40px;
      padding-bottom: 14px;
    }

    :deep(.el-menu-item) {
      height: 40px;
    }
  }
}

:deep(.el-collapse) {
  --el-collapse-border-color: none;
}

.list-item {
  margin-bottom: 24px;
}

:deep(.el-icon.el-collapse-item__arrow) {

}

:deep(.el-collapse-item__header) {
  height: fit-content;
  border: none;
  line-height: 14px;
  background-color: #f8f9fa;
}

:deep(.el-collapse-item__content) {
  background-color: #f8f9fa;
  padding: 0;
}

:deep(.el-collapse-item__wrap) {
  margin: 8px 0;
  background-color: #f8f9fa;
}

:deep(.el-form-item__content) {
  justify-content: space-between;
}

.pre-course {
  flex-flow: row wrap;
  overflow-y: auto;
  max-height: 320px;
  display: grid;
  max-width: 1200px;
  justify-content: start;
  grid-template-columns: repeat(auto-fill, 318px);
  margin-top: 12px;
  grid-column-gap: 30px;
  grid-row-gap: 20px;
}

.pre-course::-webkit-scrollbar {
  display: none;
}

</style>
